<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/axios.js"></script>
		<script>
			//url地址:
			let url1 = "http://localhost:8080/axios/findUser"
			//语法:axios.get(url地址,)
			axios.get(url1)
				 .then(function(promise){
					 console.log(promise.data)  //返回的是promise对象,也就是js对象
				 })
			// axios.get(url1)
			// 	 .then((res) => {
					 
			// 	 })
			
			/**
			 * 2.参数拼接
			 * 需求: 根据Id查询User数据
			 */
			let id2 = 100;
			let url2 = "http://localhost:8080/axios/findUserById?id="+id2
			axios.get(url2)
				 .then(promise => {
					 console.log(promise.data)
				 })
				 
			/**
			 * 需求3:查询name="疫情快结束了" age = 1
			 * 关键字:params 对象标识符
			 */
			let user3 = {name:"西安加油",age:1}
			let url3 = "http://localhost:8080/axios/findUserByNA"
			axios.get(url3,{params:user3})
				 .then(promise => {
					 console.log(promise.data)
				 })
				 
			/**
			 * 需求: 利用restFul 传递name/age
			 * 前端知识点 : 模板字符串
			 * 语法:  反引号``
			 * 作用:
			 * 		1.可以保证字符串的语法结构
			 * 		2.可以动态的获取对象中的数据
			 */
			let user4 ={name:"南孚电池",age:8}
			// let url4 = "http://localhost:8080/axios/user/"+user4.name+"/"+user4.age
			let url4 = `http://localhost:8080/axios/findUserNA/${user4.name}/${user4.age}`
			axios.get(url4)
				 .then(promise => {
					 console.log(promise.data)
				 })
			
			/**
			 * 简化Axios调用 设定公共的请求的前缀 如果已经有 http:// 协议则不拼接前缀
			 */
			axios.defaults.baseURL = "http://localhost:8080/axios"
			let url5 = `/findUserNA/${user4.name}/${user4.age}`
			axios.get(url5)
				 .then(promise => {
					 console.log(promise.data)
				 })
		</script>
		<h1>学习Axios</h1>
	</body>
</html>
